<template>
    <div class="layout-footer">
        <div class="layout-footer__logo">
            <img :src="`${_oss_}images/logo_white.png`" alt="北京华锐云空间" />
        </div>

        <div class="layout-footer__top">
            <img class="contact-img" alt="北京华锐云空间" :src="`${_oss_}images/footer/contact.png`" />
            <div class="contact-information">
                <div class="contact-input">
                    <div class="contact-label">姓名</div>
                    <el-input type="text" v-model="contactInfo.name" />
                </div>
                <div class="contact-input">
                    <div class="contact-label">电话</div>
                    <el-input type="text" v-model="contactInfo.phone" />
                </div>
                <div class="contact-input">
                    <div class="contact-label">需求</div>
                    <el-input type="text" v-model="contactInfo.demand" />
                </div>
                <div class="contact-input">
                    <div class="contact-label">公司/行业</div>
                    <el-input type="text" v-model="contactInfo.company" />
                </div>
            </div>
            <div class="contact-footer">
                <div class="num">
                    已有
                    <div class="num-filter">{{ num }}</div>
                    人领取
                </div>
                <div class="receive-btn btn-active" @click="onLeaveMessage">
                    留言免费领取
                </div>
            </div>
        </div>
        <div class="layout-footer__middle">
            <div class="contact-information">
                <div class="contact-information__title">
                    <img class="icon-tel" :src="`${_oss_}images/footer/tel.png`" />
                    <div class="title-name">联系方式</div>
                </div>

                <div class="contact-information__cell" v-for="item in AddressList" :key="item.address">
                    <div class="address">
                        {{ item.address }}
                    </div>
                    <div class="phone">{{ item.phone }}</div>
                </div>
            </div>
        </div>

        <div class="layout-footer__footer">
            <div class="code-box" v-for="item in QrCodeList" :key="item.name">
                <div class="name">{{ item.name }}</div>
                <img :src="item.image" alt="北京华锐云空间" />
            </div>
        </div>

        <div class="layout-footer__nav">
            <template v-for="(item, index) in NavList" :key="item.title">
                <router-link :to="item.link">{{ item.title }}</router-link>
                <div class="connect" v-if="index < NavList.length - 1">/</div>
            </template>
        </div>
        <!-- <div class="layout-footer__nav">
            <router-link to="/case.html">企业案例（PGC）</router-link>
            <div class="connect">/</div>
            <router-link to="/news.html">新闻动态</router-link>
            <div class="connect">/</div>
            <router-link to="/help.html">帮助中心</router-link>
        </div> -->

        <div class="layout-footer__copyright">
            <p>
                Copyright @ 2025 北京华锐视点数字科技有限公司 All Rights
                Reserved&nbsp;
            </p>
            <p>
                <a class="link" href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">
                    京ICP备13009860号-10
                </a>
                &nbsp;/&nbsp;北京华锐视点数字科技有限公司
            </p>
        </div>

        <a class="link sitemap" href="/sitemap.xml"> 网站地图 </a>
    </div>
</template>
<script setup>
import { useContent } from ".";

const {
    NavList,
    contactInfo,
    AddressList,
    QrCodeList,
    num,
    GetNum,
    onLeaveMessage,
} = useContent();

onMounted(async () => {
    GetNum();
});
</script>
<style lang="scss" scoped>
.layout-footer {
    position: relative;
    background-color: #030619;
    padding: 15px;
    z-index: 0;

    &__logo {
        width: 150px;
        margin-bottom: 20px;

        img {
            width: 100%;
        }
    }

    &__top {
        width: 100%;

        .contact-img {
            width: 100%;
        }

        .contact-information {
            .contact-input {
                display: flex;
                align-items: center;
                color: #fff;
                background-color: #1a2335;
                border-radius: 0;
                padding: 0 10px;
                margin-top: 9px;

                .contact-label {
                    flex-shrink: 0;
                    font-size: 14px;
                }
            }

            :deep(.el-input) {
                background-color: transparent;

                .el-input__wrapper {
                    background-color: transparent;
                    border: none !important;
                    outline: none !important;
                    box-shadow: none !important;

                    .el-input__inner {
                        color: #fff;
                    }
                }
            }
        }

        .contact-footer {
            color: #c1c1c6;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 14px;

            .num {
                display: flex;
                font-size: 14px;

                &-filter {
                    position: relative;
                    color: #fff;
                    margin: 0 4px;

                    &::after {
                        position: absolute;
                        content: "";
                        width: 40%;
                        left: 50%;
                        top: 50%;
                        border-radius: 20px;
                        box-shadow: 0 0 8px 8px #0085cdb3;
                        transform: translate(-50%, -50%);
                        z-index: -1;
                    }
                }
            }

            .receive-btn {
                width: 110px;
                height: 32px;
                margin-left: 10px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                background-color: #0085cd;
                font-size: 14px;
                cursor: pointer;
                user-select: none;
            }
        }
    }

    &__middle {
        margin-top: 40px;

        .contact-information {
            color: #fff;
            font-size: 14px;

            &__title {
                display: flex;
                align-items: center;
                font-size: 16px;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 6px;
                }
            }

            &__cell {
                margin-top: 20px;

                .phone {
                    margin-top: 12px;
                    font-size: 12px;
                    color: #9a9ba3;
                }
            }
        }
    }

    &__footer {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;

        .code-box {
            margin-right: 15px;
            margin-bottom: 20px;

            .name {
                color: #fff;
                font-size: 14px;
                margin-bottom: 12px;
            }

            img {
                width: 100px;
                height: 100px;
            }

            &:nth-of-type(3n) {
                margin-right: 0;
            }
        }
    }

    &__copyright {
        font-size: 12px;
        color: #9a9ba3;
        border-top: 1px solid #353847;
        text-align: center;

        p {
            margin-top: 10px;
        }

        .link {
            text-decoration: none;
            color: #9a9ba3;
        }
    }

    &__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        border-top: 1px solid #353847;
        flex-wrap: wrap;
        padding: 10px 0;
        line-height: 1.5em;

        a {
            text-decoration: none;
            color: #9a9ba3;
            font-size: 14px;

            &:hover {
                color: #5085fb;
                text-decoration: underline;
            }
        }

        .connect {
            color: #9a9ba3;
            margin: 0 10px;
        }
    }

    .sitemap {
        display: block;
        width: 100%;
        margin-top: 10px;
        margin-left: 10px;
        text-align: center;
        color: #9a9ba3;
        font-size: 12px;
        text-decoration: none;
    }
}
</style>
